<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<style>body {
padding: 0;
margin: 0;
background: #fff
}</style>
</head>
<body>
<button onclick="animateGauges()">Animate</button>
<hr>
<canvas data-type="radial-gauge"
data-major-ticks="950, 960, 970, 980, 990, 1000, 1010, 1020, 1030, 1040, 1050"
data-type="radial-gauge"
data-title="Barometer"
data-units="mBar"
data-width="200"
data-height="200"
data-value-int="0"
data-value-dec="0"
data-width="200"
data-height="200"
data-min-value="950"
data-max-value="1050"
data-highlights="false"
></canvas>
<script async src="../gauge.min.js"></script>
<script>
var timers = [];
function animateGauges() {
document.gauges.forEach(function(gauge) {
timers.push(setInterval(function() {
gauge.value = Math.random() *
(gauge.options.maxValue - gauge.options.minValue) +
gauge.options.minValue;
}, gauge.animation.duration + 50));
});
}
</script>
</body>
</html>